<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>bomb</title>
    <style media="screen">
      * {
        margin: 0;
        padding: 0;
        /*box-sizing: border-box;*/
      }
      .wrap > img{
        width: 800px;
        height: 800px;
      }
      .bomb-mask {
        transition: transform 4s, opacity 4s;
        will-change: transform, opacity;
        -webkit-backface-visibility: hidden;
        overflow: hidden;
      }
    </style>
    <script src="gulpfile.js"></script>
    <script src="dist/bomb.js"></script>
    <script src="dist/bomb.min.js"></script>
  </head>
  <body>
    <div class="wrap">
      <img id="bomb" src="src/1.jpg"/>
    </div>
    <script type="text/javascript" src="dist/bomb.js"></script>
    <script type="text/javascript">
    addEventListener('load', function () {
      new Bomb(document.getElementById('bomb'), {
        x: 50,
        y: 25
      });
    });
    </script>
  </body>
</html>
